Форма обратной связи

[steepfox]

Здравствуйте. Есть подобная форма обратной связи, она появляется в виде popup окна, я, с горем пополам, настроил ее на обычную статическую форму обратной связи, но при нажатии на кнопку заказать, форма исчезает и вместо нее появляется сообщение: "Заявка удачно оформлена. Заявке присвоен номер. Наш менеджер свяжется с вами в ближайшее время.

Вопрос: как сделать, чтобы после нажатия кнопки заказа вылетало popup окно, в котором и будет данный текст: "Заявка удачно оформлена..." и сама форма не исчезла? Кто поможет, того отблагодарю)

Сам скрипт:

<div id="popup">
 <form id="contact_form" role="form" method="post" action="./php/order.php">
 <h3>Напишите нам</h3>
 <input type="text" name="name"  placeholder="Как к вам обращаться?">
 <input type="text" name="tel"  class="required" placeholder="Контакный телефон (обязательно)">
 <input type="text" name="email" placeholder="Email">
 <textarea name="message" placeholder="Текст сообщения" rows="5"></textarea>
 <a href="#" class="btn button form_submit">Заказать</a>
 </form>
</div>

$(function() {
	//Функция проверяет заполнено ли поле с телефоном
	function formValide() {			
		var str = $('#contact_form input[name=tel]').val();
		str = jQuery.trim(str);                
		if(str.length < 5){                
			alert ('Введите телефон');			
			return false;
		}	
		return true;
	}

	//при нажатии на кнопку button нужной формы запускаем функцию обработки данных
	$('#contact_form .button').live('click', function() {
		if (formValide()) {
			//если форма прошла проверку, выводим блок с текстом ожидания
			$('#contact_form').before('<h3 id="contact_form_info">Оформление заявки. Подождите...</h3>');
			$('#contact_form').hide();
			//берем путь php обработчика
			order_url = $('#contact_form').attr('action');			
			//посылаем асинхронный запрос на сервер и передаем все данные формы
			$.post(order_url,{
					name: $('#contact_form input[name=name]').val(),
					tel: $('#contact_form input[name=tel]').val(),
                    email: $('#contact_form input[name=email]').val(),
                    message: $('#contact_form textarea[name=message]').val(),
					send: "1"
				}, function(data) {
					//выводим возврашаемый сервером код html вместо содержимого формы
				$('#contact_form').html(data);
				$('#contact_form').show();
				$('#contact_form_info').remove();
			}, "html");			
		}
		return false;
	});
});

// =========================================================================  go_order
$(function() {
	//фкнкция вызова формы обратной связи
	$('#callback').click(function(){
		//появление окна обратной связи
		$('#popup').fadeIn();
		//добавляем к окну иконку закрытия
        $('#popup').append('<a id="popup_close"></a>');
		//расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
        q_width = $('#popup').outerWidth()/-2;
        q_height = $('#popup').outerHeight()/-2;
        $('#popup').css({
            'margin-left': q_width,
            'margin-top': q_height
        });
		//выводим затемение страницы и делаем полупрозрачным
        $('body').append('<div id="fade"></div>');
        $('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn();
		return false;
	});
	
	//функция закрытия окна
	$('#popup_close, #fade').live('click', function() {
		$('#fade').fadeOut(function() {
			$('#fade').remove();
            $('#popup_close').remove();
			$('#popup').fadeOut();
		});
	});

});

<?php
	header('Content-type: text/html; charset=utf-8');
	error_reporting(0);   

if(!empty($_POST['send'])) {

	$name = substr(htmlspecialchars(trim($_POST['name'])), 0, 300);
	$tel = substr(htmlspecialchars(trim($_POST['tel'])), 0, 100);
    $email = substr(htmlspecialchars(trim($_POST['email'])), 0, 100);
    $message = substr(htmlspecialchars(trim($_POST['message'])), 0, 3000);
	
	$ip = $_SERVER['REMOTE_ADDR'];

	$Nzakaz = rand(10000, 99999);

	$mess  = "Имя: <b>".$name."</b><br />";
	$mess .= "Телефон: <b>".$tel."</b><br />";
    $mess .= "Email: <b>".$email."</b><br />";
    $mess .= "Сообщение: <b>".$message."</b><br />";
	
	$theme = "Заявка Z".$Nzakaz;

	mail("bratkaprod@gmail.com", $theme, $mess, "From: mysite.com <mymail@mail.ru>\nContent-Type: text/html;\n charset=utf-8\nX-Priority: 0");
	
	echo "<h3>Заявка удачно оформлена.</h3>";
	echo "<p>Заявке присвоен номер Z".$Nzakaz.". Наш менеджер свяжется с вами в ближайшее время.</p>";
        
    }
else {
	
	echo "<h2>Ошибка! Попробуйте еще раз.</h2>";
	
}
	
?>

[steepfox]

Помогите кто чем может )

[laimas]

но при нажатии на кнопку заказать, форма исчезает ......

Все верно, ибо вы содержимое тега формы перезаписываете ответом сервера - $('#contact_form').html(data);, при этом $('#contact_form').show(); совсем не к чему, она же у вас и так отображается.

А если чтобы "вылетало окно", создавайте слой с абсолютным или фиксированной позицией с размещением выше, в который и помещайте ответ (код и стили простые, можно и на форуме поискать а в сети тем более куча примеров). Вообще есть готовые под jQ плагины всяких "вылеталок" от простых до с большим функционалом.

Ну и можно заметить - изначально написано, что форма у вас и была в слое, который вы угробили, а можно было бы получить ответ и закрывать ее, и проблем с "нужно чтобы вылетало окно" не было бы.

[steepfox]

На сайте 3 формы: 2 статические и одна всплывает при нажатии на кнопку обратного звонка, просто использую разные id для форм.
Laimas, ты же меня знаешь, что дуб дубом в этом деле, уже общались)

Форма в слое есть, просто не знаю как это реализовать, не хватает знаний, если не сложно, то помоги, пожалуйста, что-где поменять, чтобы форма не исчезала и выскакивало popup окно - просто подсказать какой добавить код, со стилями и html слава Богу дружу)

[laimas]

Это "... форма обратной связи, она появляется в виде popup окна, я, с горем пополам, настроил ее на обычную статическую форму обратной связи ..." можно понять как "выскакивало", а затем угробили. К чему при этом приводить код //появление окна обратной связи я тогда не понимаю.

Если же эта форма появляется в этом всплывающем слое (ничего не угробили), то у вас все есть, нужно только ответ сервера организовать правильно, например при ошибках сообщение об ошибке добавляется в форму, а при удаче форму можно и скрыть, показав ответ сервера. Затем закрывать слой, на что у вас и функция.

Вот только если используется метод .live(), значит используется древняя jQuery. А код сервера в части if(!empty($_POST['send'])) вообще вне логики.

Так что уж тогда поясните, что же вы "угробили", что значит теперь "статика"....?

[steepfox]

В том то и дело, что не знаю как вставить этот код, как правильно организовать ответ сервера, не хватает знаний.

Да, версия JQuery 1.7.2.

[laimas]

Какой код вам нужен, если вашими же словами форма теперь доступна всегда, но при этом в коде она в <div id="popup"> и появляется по $('#popup').fadeIn()? О какой форме тогда речь?

Отправка клиентом send: "1" и проверка сервером if(!empty($_POST['send'])) почта, иначе Ошибка, ну это несуразица.

[steepfox]

Нужен код, чтобы форма не исчезала и при нажатии на кнопку заказать всплывала окно с текстом заявка удачно оформлена, заявке присвоен такой-то номер.

[laimas]

Ну так уберите форму из <div id="popup">, и используйте его для вывода ответа сервера. Для этого код начиная со строки 40 можно заменить на функцию вызывающее такое окно, а которое можно передавать содержание, например:

function popupShow(data){
    $('#popup') //открыть окно
        .html(data + '<a id="popup_close"/>') 
        .fadeIn()
        .css({marginLeft: function() {
                return $(this).outerWidth()/2
            },
            marginTop: function() {
                return $(this).outerHeight()/2
            }
        })
        .find('#popup_close').click(function() { //закрыть окно
            $('#fade').remove();
            $(this).parent().fadeOut()
        })

        //выводим затемение страницы и делаем полупрозрачным
        $('<div id="fade"/>').appendTo('body').fadeIn();
}

А ответ сервера:

$('#contact_form').html(data);
$('#contact_form').show();
$('#contact_form_info').remove();

и вызывать функцию вместо этого - popupShow(data).

'filter' : 'alpha(opacity=40)' - это для ишака, и этот стиль нужно прописать в CSS.

PS. То что делается на сервере, это конечно лажа. По уму сервер должен проверять данные извне и отправлять ошибки клиенту. function formValide() - это филькина грамота для сервера. А это означает, что "выскакивало окно" имеет право быть только в случае их отсутствия.

[laimas]

И потом, "любовь" к костылям типа <a href="#" class="btn button form_submit">Заказать</a> не имеет объяснения, когда форма обладает двумя типами кнопок, которыми ее можно отправить. И обрабатывать нужно событие ее отправки, делая на время запроса сервера кнопку отправления недоступной, а по ответу сервера доступной.